<template>
   
  <div class="app-container">
    <el-card class="filter-container" shadow="never">
      <div>
        <i class="el-icon-search"></i>
        <span>筛选搜索</span>
        <el-button
          style="float: right"
          @click="handleSearchList()"
          type="primary"
          size="small"
        >
          查询结果
        </el-button>
        <el-button
          style="float: right; margin-right: 15px"
          @click="handleResetSearch()"
          size="small"
        >
          重置
        </el-button>
      </div>
      <div style="margin-top: 15px">
        <el-form
          :inline="true"
          :model="searchMailList"
          size="small"
          label-width="140px"
        >
          <el-form-item label="快递单号:">
            <el-input
              style="width: 203px"
              v-model="searchMailList.courierIds"
              placeholder="请输入要搜索的快递单号"
              clearable
            ></el-input>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
    <el-card style="margin-top: 15px" class="operate-container" shadow="never">
      <i class="el-icon-tickets"></i>
      <span>数据列表</span>
    </el-card>
    <div style="margin-top: 15px" class="table-container">
      <el-table
        :data="MailList"
        style="width: 100%"
        height="260px"
        v-loading="listLoading"
        border
      >
        <el-table-column
          type="selection"
          width="60"
          align="center"
        ></el-table-column>

        <el-table-column label="快递单号" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.courierId }}</template>
        </el-table-column>
        <el-table-column label="寄件人" width="200" align="center">
          <template slot-scope="scope">{{
            scope.row.sender.username
          }}</template>
        </el-table-column>
        <el-table-column label="收件人" width="200" align="center">
          <template slot-scope="scope">{{
            scope.row.receiver.username
          }}</template>
        </el-table-column>
        <el-table-column label="快递类型" width="134" align="center">
          <template slot-scope="scope">{{ scope.row.type }}</template>
        </el-table-column>
        <el-table-column label="快递状态" width="134" align="center">
          <template slot-scope="scope">{{ scope.row.status }}</template>
        </el-table-column>
        <el-table-column label="紧急程度" width="200" align="center">
          <template slot-scope="scope">{{ scope.row.urgency }}</template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="快递物流"
          width="200"
          align="center"
        >
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="logistics(scope.row.logistics, scope.row)"
              >查看快递物流
            </el-button>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="primary"
              @click="
                (messageEditDialogVisible = true), showMessageData(scope.$index)
              "
              >查询快递详情
            </el-button>
            <el-button
              size="mini"
              :disabled="scope.row.status == '已签收'"
              type="warning"
              @click="reminder(scope.row.courierId)"
              >催单
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-dialog
        title="查看快递物流"
        :visible.sync="logisticsDialogVisible"
        width="50%"
        :before-close="handleClose"
      >
        <span>
          <el-timeline>
            <el-timeline-item
              v-for="(item,index) in logisticsData"
              :key="index"
              :timestamp="item.Time"
              placement="top"
            >
              <el-card>
                <h4>{{ item.describe }}</h4>
              </el-card>
            </el-timeline-item>
          </el-timeline>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="logisticsDialogVisible = false"
            >返 回</el-button
          >
        </span>
      </el-dialog>
      <el-dialog
        title="查询快递详情"
        :visible.sync="messageEditDialogVisible"
        width="60%"
        :before-close="handleClose"
      >
        <span>
          <el-descriptions
            title=""
            v-model="detailMailList"
            direction="vertical"
            :column="4"
            border
          >
            <el-descriptions-item label="快递单号">{{
              detailMailList.courierId
            }}</el-descriptions-item>
            <el-descriptions-item label="寄件人">{{
              senderList.username
            }}</el-descriptions-item>
            <el-descriptions-item label="收件人">{{
              receiverList.username
            }}</el-descriptions-item>
            <el-descriptions-item label="快递类型">{{
              detailMailList.type
            }}</el-descriptions-item>
            <el-descriptions-item label="重量(kg)">{{
              detailMailList.weight
            }}</el-descriptions-item>
            <el-descriptions-item label="价格">{{
              detailMailList.price
            }}</el-descriptions-item>
            <el-descriptions-item label="快递状态">{{
              detailMailList.status
            }}</el-descriptions-item>
            <el-descriptions-item label="紧急程度">{{
              detailMailList.urgency
            }}</el-descriptions-item>
            <el-descriptions-item label="寄件时间">{{
              detailMailList.createTime
            }}</el-descriptions-item>
          </el-descriptions>
        </span>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="messageEditDialogVisible = false"
            >返 回</el-button
          >
        </span>
      </el-dialog>
    </div>
    <div class="block">
      <el-pagination
        @current-change="handleCurrentChange"
        layout="prev, pager, next"
        :page-count="pageCunt"
        :current-page.sync="currentPage"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script>
export default {
  name: "brancheManage",
  data() {
    return {
      value1: new Date(2016, 9, 10, 18, 40),
      value2: new Date(2016, 9, 10, 18, 40),
      searchMailList: {
        courierIds: "",
        endTime: "",
        startTime: "",
        status: "",
        type: "",
        urgency: "",
        pageNum: "1",
        pageSize: "5",
      },
      currentPage: 1,
      currentMailList: {
        courierIds: "",
        endTime: "",
        startTime: "",
        status: "",
        type: "",
        urgency: "",
        pageNum: "1",
        pageSize: "5",
      },
      detailMailList: {},
      senderList: {},
      receiverList: {},
      MailList: [],
      sendAddressOptions: [],
      receiveAddressOptions: [],
      // price: "",
      addMail: {
        type: "",
        urgency: "",
        receiveAddressId: "",
        receiveNetworkId: "",
        receiverAddress: "",
        receiverEmail: "",
        receiverName: "",
        receiverPhone: "",
        sendAddressId: "",
        sendNetworkId: "",
        senderAddress: "",
      },
      typeOptions: [
        {
          value: "0", //BOOK
          label: "书籍",
        },
        {
          value: "1", //CLOTH
          label: "衣物",
        },
        {
          value: "2", //CLOTH
          label: "日常用品",
        },
        {
          value: "3", //CLOTH
          label: "食品",
        },
        {
          value: "4", //CLOTH
          label: "家用电器",
        },
        {
          value: "5", //CLOTH
          label: "电子器件",
        },
        {
          value: "6", //CLOTH
          label: "易碎品",
        },
        {
          value: "7", //CLOTH
          label: "信件",
        },
        {
          value: "8", //CLOTH
          label: "其他",
        },
      ],
      statusOptions: [
        {
          value: "6",
          label: "已签收",
        },
        {
          value: "-2",
          label: "已取消",
        },
        {
          value: "1",
          label: "已揽件",
        },
        {
          value: "4",
          label: "派送中",
        },
        {
          value: "-3",
          label: "取件失败",
        },
        {
          value: "-1",
          label: "丢失",
        },
        {
          value: "2",
          label: "已发货",
        },
        {
          value: "3",
          label: "运输中",
        },
        {
          value: "0",
          label: "待揽收",
        },
        {
          value: "5",
          label: "待取件",
        },
      ],
      urgencyOptions: [
        {
          value: "0", //NORMAL
          label: "标快",
        },
        {
          value: "1", //QUICK
          label: "特快",
        },
      ],
      listLoading: true,
      addDialogVisible: false,
      messageEditDialogVisible: false,
      pageCunt: 1,
      statusEditDialogVisible: false,
      logisticsDialogVisible: false,
      rules: {},
      logisticsData: [],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      this.listLoading = true;
      this.axios
        .post("api/auth/customer/delivery/listReceive?pageNum=1&pageSize=5")
        .then((response) => {
          console.log(response);
          if (response.data.code == "200") {
            this.MailList = response.data.value.data;
            this.MailList.forEach(function (item, index) {
              if (item.type == "0") {
                item.type = "书籍";
              } else if (item.type == "1") {
                item.type = "衣物";
              } else if (item.type == "2") {
                item.type = "日常用品";
              }else if (item.type == "3") {
                item.type = "食品";
              }else if (item.type == "4") {
                item.type = "家用电器";
              }else if (item.type == "5") {
                item.type = "电子器件";
              }else if (item.type == "6") {
                item.type = "易碎品";
              }else if (item.type == "7") {
                item.type = "信件";
              }else{
                item.type = "其他";
              }

              if (item.status == "6") {
                item.status = "已签收";
              } else if (item.status == "-2") {
                item.status = "已取消";
              } else if (item.status == "1") {
                item.status = "已揽件";
              } else if (item.status == "4") {
                item.status = "派送中";
              } else if (item.status == "-3") {
                item.status = "取件失败";
              } else if (item.status == "-1") {
                item.status = "丢失";
              } else if (item.status == "2") {
                item.status = "已发货";
              } else if (item.status == "3") {
                item.status = "运输中";
              } else if (item.status == "0") {
                item.status = "待揽件";
              } else {
                item.status = "待取件";
              }

              if (item.urgency == "0") {
                item.urgency = "标快";
              } else {
                item.urgency = "特快";
              }
            });
            if (
              response.data.value.total / 5 >
              Number.parseInt(response.data.value.total / 5)
            ) {
              this.pageCunt =
                Number.parseInt(response.data.value.total / 5) + 1;
            } else {
              this.pageCunt = Number.parseInt(response.data.value.total / 5);
            }
            this.currentPage = 1;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    handleResetSearch() {
      this.searchMailList = {
        courierIds: "",
        endTime: "",
        startTime: "",
        status: "",
        type: "",
        urgency: "",
        pageNum: "1",
        pageSize: "5",
      };
    },
    handleCurrentChange(val) {
      this.listLoading = true;
      this.axios
        .post(
          "api/auth/customer/delivery/listReceive?pageNum=" +
            val +
            "&pageSize=5"
        )
        .then((response) => {
          console.log(response);
          if (response.data.code == "200") {
            this.MailList = response.data.value.data;
            this.MailList.forEach(function (item, index) {
              if (item.type == "0") {
                item.type = "书籍";
              } else if (item.type == "1") {
                item.type = "衣物";
              } else if (item.type == "2") {
                item.type = "日常用品";
              }else if (item.type == "3") {
                item.type = "食品";
              }else if (item.type == "4") {
                item.type = "家用电器";
              }else if (item.type == "5") {
                item.type = "电子器件";
              }else if (item.type == "6") {
                item.type = "易碎品";
              }else if (item.type == "7") {
                item.type = "信件";
              }else{
                item.type = "其他";
              }

              if (item.status == "6") {
                item.status = "已签收";
              } else if (item.status == "-2") {
                item.status = "已取消";
              } else if (item.status == "1") {
                item.status = "已揽件";
              } else if (item.status == "4") {
                item.status = "派送中";
              } else if (item.status == "-3") {
                item.status = "取件失败";
              } else if (item.status == "-1") {
                item.status = "丢失";
              } else if (item.status == "2") {
                item.status = "已发货";
              } else if (item.status == "3") {
                item.status = "运输中";
              } else if (item.status == "0") {
                item.status = "待揽件";
              } else {
                item.status = "待取件";
              }

              if (item.urgency == "0") {
                item.urgency = "标快";
              } else {
                item.urgency = "特快";
              }
            });
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    handleSearchList() {
      this.listLoading = true;
      this.axios
        .post(
          "api/auth/customer/delivery/listReceive?type=" +
            this.searchMailList.type +
            "&urgency=" +
            this.searchMailList.urgency +
            "&status=" +
            this.searchMailList.status +
            "&courierIds=" +
            this.searchMailList.courierIds +
            "&startTime=" +
            this.searchMailList.startTime +
            "&endTime=" +
            this.searchMailList.endTime +
            "&pageNum=1&pageSize=5"
        )
        .then((response) => {
          console.log(response);
          if (response.data.code == "200") {
            this.MailList = response.data.value.data;
            this.MailList.forEach(function (item, index) {
              if (item.type == "0") {
                item.type = "书籍";
              } else if (item.type == "1") {
                item.type = "衣物";
              } else if (item.type == "2") {
                item.type = "日常用品";
              }else if (item.type == "3") {
                item.type = "食品";
              }else if (item.type == "4") {
                item.type = "家用电器";
              }else if (item.type == "5") {
                item.type = "电子器件";
              }else if (item.type == "6") {
                item.type = "易碎品";
              }else if (item.type == "7") {
                item.type = "信件";
              }else{
                item.type = "其他";
              }

              if (item.status == "6") {
                item.status = "已签收";
              } else if (item.status == "-2") {
                item.status = "已取消";
              } else if (item.status == "1") {
                item.status = "已揽件";
              } else if (item.status == "4") {
                item.status = "派送中";
              } else if (item.status == "-3") {
                item.status = "取件失败";
              } else if (item.status == "-1") {
                item.status = "丢失";
              } else if (item.status == "2") {
                item.status = "已发货";
              } else if (item.status == "3") {
                item.status = "运输中";
              } else if (item.status == "0") {
                item.status = "待揽件";
              } else {
                item.status = "待取件";
              }

              if (item.urgency == "0") {
                item.urgency = "标快";
              } else {
                item.urgency = "特快";
              }
            });
            if (
              response.data.value.total / 5 >
              Number.parseInt(response.data.value.total / 5)
            ) {
              this.pageCunt =
                Number.parseInt(response.data.value.total / 5) + 1;
            } else {
              this.pageCunt = Number.parseInt(response.data.value.total / 5);
            }
            this.currentPage = 1;
          } else {
            this.$message.error(response.data.message);
          }
          this.listLoading = false;
        })
        .catch((error) => {
          this.$message.error("无法获取数据");
          this.listLoading = false;
        });
    },
    showMessageData(index) {
      this.detailMailList = this.MailList[index];
      this.senderList = this.MailList[index].sender;
      this.receiverList = this.MailList[index].receiver;
      console.log(this.detailMailList.sender.username);
    },
    showStatusData(index) {
      this.editStatus = this.MailList[index];
    },
    reminder(id) {
      this.axios
        .get("api/auth/customer/delivery/urge", {
          params: {
            courierId: id,
          },
        })
        .then((response) => {
          if (response.data.code == "200") {
            this.$message({
              message: "系统已为您催单，请耐心等待",
              type: "success",
            });
          }else{
            this.$message.error(response.data.message);
          }
        })
        .catch((error) => {});
    },
    timestampToTime(times) {
      let time = times[1];
      let mdy = times[0];
      mdy = mdy.split("/");
      let month = parseInt(mdy[0]);
      let day = parseInt(mdy[1]);
      let year = parseInt(mdy[2]);
      return year + "-" + month + "-" + day + " " + time;
    },
    async logistics(logistics, deliver) {
      this.logisticsData = [] ;
      this.logisticsDialogVisible = true;
      var temp = {};
      if (deliver.status == "已签收") {
        temp.Time = deliver.endTime;
        temp.describe = "已签收:" + deliver.receiver.address;
        this.logisticsData.push(temp);
      } else {
        await this.axios
        .get("api/customer/delivery/getDeliveryPath", {
          params: {
            courierId: deliver.courierId,
          },
        })
        .then((response) => {
          if(response.data.value.day != undefined){
            temp = {};
            temp.Time = this.timestampToTime(new Date().toLocaleString('en-US',{hour12: false}).split(" "))
            temp.describe = '您的快递预计还有'+ response.data.value.day +'天到达'
            this.logisticsData.push(temp);
          }else if( response.data.value.day == undefined && logistics == undefined){
            temp = {};
            temp.Time = this.timestampToTime(new Date().toLocaleString('en-US',{hour12: false}).split(" "))
            temp.describe = '暂无快递信息'
            this.logisticsData.push(temp);
          }
        })
        .catch((error) => {});
      }
      while (logistics != undefined) {
        temp = {};
        if (logistics.status == "0") {
          temp.Time = logistics.createTime;
          temp.describe = "已到达" + logistics.network.name;
        } else {
          var temp1 = {};
          temp1.Time = logistics.leaveTime;
          temp1.describe = "已离开" + logistics.network.name;
          this.logisticsData.push(temp1);
          temp.Time = logistics.createTime;
          temp.describe = "已到达" + logistics.network.name;
        }
        this.logisticsData.push(temp);
        logistics = logistics.parent;
      }
      console.log(this.logisticsData)
    },
  },
};
</script>
<style></style>



